<template>
    <!-- header -->
    <div class="flex flex-row justify-between items-center px-4 py-2 border-b">
        <div class="flex flex-row justify-between items-center gap-2">
            <n-icon size="16" :component="ArrowBack" />
            <div class="text-sm font-medium border-l pl-2">
                患者信息填写
            </div>
        </div>
        <div class="bg-gray-200 rounded-lg flex flex-row gap-1 px-2 py-1">
            <div class="bg-white rounded w-8 h-6 flex justify-center items-center">
                <n-icon size="16" :component="DesktopOutline" />
            </div>
            <div class="w-8 h-6 flex justify-center items-center">
                <n-icon size="16" :component="PhonePortraitOutline" />
            </div>
        </div>
        <div>
            <n-button strong secondary type="primary" size="tiny">
                预览
            </n-button>
            <n-button strong secondary type="primary" size="tiny">
                保存
            </n-button>
        </div>
    </div>

    <!-- body -->
    <div class="bg-gray-100 min-h-full grid grid-cols-5">
        <div class="bg-white col-span-1">
            <Items />
        </div>
        <div class="col-span-3">
            <Preview />
        </div>
        <div class="bg-white col-span-1">
            <Setting />
        </div>

    </div>
</template>

<script setup>
import { NIcon, NButton } from 'naive-ui';
import Items from './components/Items.vue';
import Preview from './components/Preview.vue';
import Setting from './components/Settings.vue';


import { DesktopOutline, ArrowBack, PhonePortraitOutline } from '@vicons/ionicons5'

</script>